<nz-card nzType="inner" nzTitle="History" [nzExtra]="historyExtraTemplate">
    <nz-table #nzTable nzSize="small" [(nzData)]="historyList">
        <thead>
            <tr>
                <th [nzSortFn]="titleSortFn">Title</th>
                <th [nzSortFn]="ipSortFn">IP</th>
                <th [nzSortFn]="operSortFn">Type</th>
                <th [nzSortFn]="timeSortFn" nzSortOrder="descend">Time</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let history of nzTable.data; let i=index" [ngClass]="{'row-selected':selectedIndex === i}" (click)='click(i)' (dblclick)='openHistory(history)'>
                <td>{{ history.host.title }}</td>
                <td>{{ history.host.ip }}</td>
                <td>{{ history.optype }}</td>
                <td>{{ history.host.oper[history.optype] }}</td>
                <td>
                    <a (click)='openHistory(history)'>Open</a>
                    <a (click)='deleteHistory(history)'>Delete</a>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <ng-template #historyExtraTemplate>
        <button nz-button (click)="refresh()"><i nz-icon nzType='redo'></i>refresh</button>
    </ng-template>
</nz-card>